<template>
    <div>
        <el-drawer
                :before-close="handleClose"
                :append-to-body="true"
                :visible.sync="dialogVip"
                :direction="direction">
            <h5 class="title">修改车牌号为{{dataBus.busNum}}的车辆信息</h5>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm demo-form-inline" :inline="true" size="medium">
                <el-form-item label="车型" prop="model" style="margin-left: 50px">
                    <el-select v-model="ruleForm.model" placeholder="请手动选择车型">
                        <el-option label="宇通客车豪华版" value="宇通客车豪华版"></el-option>
                        <el-option label="宇通客车旅游版" value="宇通客车旅游版"></el-option>
                        <el-option label="奔驰迈巴赫" value="奔驰迈巴赫"></el-option>
                        <el-option label="宝马x5" value="宝马x5"></el-option>
                        <el-option label="大众CC" value="大众CC"></el-option>
                        <el-option label="五菱宏光" value="五菱宏光"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="载客人数" prop="load">
                    <el-input type="number" v-model.number="ruleForm.load" style="width:85px;" :placeholder="dataBus.busLoad"></el-input>
                </el-form-item>
                <el-form-item label="司机" prop="dName">
                    <el-select v-model="ruleForm.dName" filterable placeholder="司机" style="width: 100px;">
                        <el-option  v-for="item in emps"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="检票员" prop="cName">
                    <el-select v-model="ruleForm.cName" filterable placeholder="检票员" style="width: 100px;">
                        <el-option  v-for="item in emps"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="Submit" :loading="loading" style="margin-right: 20px">{{ loading ? '提交中 ...' : '确认修改' }}</el-button>
                    <el-button @click="cancelForm">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>

</template>

<script>
    export default {
        name: "EditBus",
        inject:['reload'],
        props:{
          dataBus:{}
        },
        data() {
            return {
                direction: 'btt',
                loading:false,
                ruleForm: {
                    model: '',
                    load: '',
                    dName: '',
                    cName: '',
                },
                rules: {
                    model: [
                        { required: true, message: '请选择车型', trigger: 'change' }
                    ],
                    load: [
                        { required: true, message: '请输入载客人数',trigger: 'blur'},
                        { type: 'number', message: '载客人数必须为数字值', trigger: 'blur'},
                    ],
                    dName: [
                        { required: true, message: '请输入司机姓名', trigger: 'blur' }
                    ],
                    cName: [
                        { required: true, message: '请输入检票员姓名', trigger: 'blur' }
                    ],
                },
                timer: null,
                emps: null,
            }
        },
        mounted(){
            this.getData();
        },
        methods:{
            async getData(){
                await this.axios.get("/option/getAllOption").then(res=>{
                    //console.log(res.data.emps);
                    this.emps=res.data.emps;
                });
            },
            handleClose(done) {
                done();
                //点击抽屉以外，直接回到列表页面
                this.loading = false;
                this.$store.commit('setDialog',false);
                clearTimeout(this.timer);
            },
            cancelForm() {
                //点击取消按钮
                this.loading = false;
                this.$store.commit('setDialog',false);
                clearTimeout(this.timer);
            },
            Submit() {
                //点击提交按钮
                if (this.loading) {
                    return;
                }
                //验证表单
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        //console.log('表单验证通过！');
                        this.$confirm('确定要提交修改吗？')
                            .then(_ => {
                                //提交表单
                                this.loading = true;
                                this.timer = setTimeout(() => {

                                    //封装车辆类
                                    let bus = new URLSearchParams();
                                    bus.append('bmodel', this.ruleForm.model);
                                    bus.append('bload', this.ruleForm.load);
                                    bus.append('did', this.ruleForm.dName);
                                    bus.append('cid', this.ruleForm.cName);
                                    bus.append('bnum', this.dataBus.busNum);
                                    bus.append('bid', this.dataBus.bid);
    
                                    // 动画关闭需要一定的时间
                                    setTimeout(() => {
                                        this.axios.post("/bus/update",bus)
                                            .then(res=>{
                                                if (res.data==""){
                                                    this.$notify({
                                                        message: "权限不足,请联系高级管理员",
                                                        type: 'error'
                                                    });
                                                }else{
                                                    this.$notify({
                                                        message: res.data,
                                                        type: 'success'
                                                    });
                                                }
                                                //关闭面板
                                                this.$store.commit('setDialog',false);
                                                //重新渲染（CSDN上的快速刷新页面）
                                                this.reload();
                                            });
                                        this.loading = false;
                                    }, 700);
                                }, 700);
                            })
                            .catch(_ => {
                                //不提交表单，回到列表页面
                                this.loading = false;
                                this.$store.commit('setDialog',false);
                                clearTimeout(this.timer);
                            });
                    } else {
                        //表单验证失败
                        this.$message.error('请正确填写车辆的修改信息');
                        return false;
                    }
                });

            },
        },
        computed:{
            dialogVip: {
                get() {
                    return this.$store.getters.dialogVip;
                },
                set() {
                    //解决警告
                }
            }
        },
    }
</script>

<style scoped>
    .title{
        text-align: center;margin-top: -30px;margin-bottom: 40px;
    }

</style>
